<template>
  <!-- 根节点作为地图的容器 -->
  <div id="map_container" style="width: 100%;height: 100%;"></div>
</template>

<script>
import { log } from '@antv/g2plot/lib/utils';

export default {
  mounted() {
      //自动加载渲染地图的方法
      this.initMap()
  },
  methods: {
      //初始化地图
      initMap() {
          //获取当前的定位 浏览器定位
          AMap.plugin('AMap.Geolocation', function () {
              var geolocation = new AMap.Geolocation({
                  // 是否使用高精度定位，默认：true
                  enableHighAccuracy: true,
                  // 设置定位超时时间，默认：无穷大
                  timeout: 10000,
                  // 定位按钮的停靠位置的偏移量，默认：Pixel(10, 20)
                  buttonOffset: new AMap.Pixel(10, 20),
                  //  定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
                  zoomToAccuracy: true,
                  //  定位按钮的排放位置,  RB表示右下
                  buttonPosition: 'RB'
              })

              geolocation.getCurrentPosition()
              AMap.event.addListener(geolocation, 'complete', onComplete)
              AMap.event.addListener(geolocation, 'error', onError)

              function onComplete(data) {
                  // data是具体的定位信息
                  console.log(data);
                  //创建了一个地图的实例 在对应的容器中进行显示
                  var map = new AMap.Map("map_container", {
                      zoom: 15,//级别
                      center: [data.position.lng, data.position.lat],//中心点坐标
                      viewMode: "3D",//使用3D视图
                  });

                  // 创建一个 Marker 实例：
                  var marker = new AMap.Marker({
                      position: new AMap.LngLat(data.position.lng, data.position.lat),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
                      //title:data.addressComponent.city,
                      title: data.formattedAddress,
                  
                  });

                  // 将创建的点标记添加到已有的地图实例：
                  map.add(marker);
              }

              function onError(data) {
                  // 定位出错
                  console.log(data);
                  
              }
          });
      },
  },
}
</script>

<style scoped></style>